<template>
    <div class="home">
        <div class="logo-box"></div>

        <div class="search-box">
            <input type="text" v-model="inputValue1">
            <button @click="clickSearch1">查询参数搜索</button>

        </div>

        <div class="hot-link">
            热门搜索(查询参数)：
            <router-link to="/search?key=黑马程序员">黑马程序员</router-link>

            <router-link to="/search?key=前端培训">前端培训</router-link>

            <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>

        </div>
        <div class="search-box">
            <input type="text" v-model="inputValue2">
            <button @click="clickSearch2">动态路由搜索</button>

        </div>
        <div class="hot-link">
            热门搜索(动态路由)：
            <router-link to="/search/黑马程序员">黑马程序员</router-link>

            <router-link to="/search/前端培训">前端培训</router-link>

            <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>

        </div>

    </div>

</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            inputValue1: '',
            inputValue2: ''
        }
    },
    methods: {
        clickSearch1() {
            // this.$router.push({
            //     path: `/search?key=${this.inputValue1}`
            // })
            // this.$router.push({
            //     path: `/search`,
            //     query: {
            //         key: this.inputValue1
            //     }
            // })
            this.$router.push({
                name: `search1`,
                query: {
                    key: this.inputValue1
                }
            })
        },
        clickSearch2() {
            console.log(this.inputValue2);
            // this.$router.push(`/search/${this.inputValue2}`)
            // this.$router.push({
            //     path:`/search/${this.inputValue2}`
            // })
            this.$router.push({
                name:'search2',
                params:{
                    words:this.inputValue2
                }
            })
        }
    }
}
</script>

<style>
.logo-box {
    height: 150px;
    /* background: url('@/assets/logo.jpeg') no-repeat center; */
}

.search-box {
    display: flex;
    justify-content: center;
}

.search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-box input:focus {
    border: 2px solid #ad2a26;
}

.search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
}

.hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}

.hot-link a {
    margin: 0 5px;
}
</style>
